<template>
  <!-- 告警规则 - 环境告警 -->
  <div class="envirAlarm">
    <!-- 温湿度阈值 -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">{{ $t("温湿度阈值") }}</div>
        <div class="table_edit">
          <div @click="editHumitureTable" class="edit-btn cursor-pointer">
            {{ !editHumiture ? $t("编辑") : $t("保存") }}
          </div>
          <div
            v-if="editHumiture"
            class="resets-btn"
            @click="resetEditHumiture"
          >
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="self">
          <el-table
            ref="tableRef"
            :data="humitureData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="alarmItem"
              :label="$t('告警项')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmThreshold"
              :label="$t('告警阈值')"
            >
              <template slot-scope="scope" v-if="scope.row.alarmThreshold">
                <div v-if="scope.row.isEdit">
                  <el-select
                    style="width: 120px"
                    v-model="scope.row.alarmThreshold[0]"
                    clearable
                    size="mini"
                    :placeholder="'请选择'"
                  >
                    <el-option
                      v-for="item in symbol"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input
                    style="width: 80px; margin: 0 8px"
                    v-model="scope.row.alarmThreshold[1]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                  &nbsp; &nbsp;<span
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    >-</span
                  >&nbsp; &nbsp;
                  <el-input
                    style="width: 80px; margin-left: 8px"
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    v-model="scope.row.alarmThreshold[2]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                </div>
                <div v-else class="txt">
                  {{ scope.row.alarmThreshold | getDetail }}
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="unit" :label="$t('单位')">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="left "
              prop="alarmRules"
              :label="$t('告警规则')"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.alarmRules"></span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="left "
              prop="definedAlarmContent"
              :label="$t('自定义告警播报内容')"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.isEdit">
                  <el-input
                    style="width: 200px; margin: 0 8px"
                    v-model="scope.row.definedAlarmContent"
                    size="mini"
                  ></el-input>
                </div>
                <div v-else v-html="scope.row.definedAlarmContent"></div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggest"
              :label="$t('告警阈值建议')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 气体浓度阈值 -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">{{ $t("气体浓度阈值") }}</div>
        <div class="table_edit">
          <div
            @click="editTable()"
            class="edit-btn cursor-pointer"
            v-hasPermi="['task:alarmrules:envedit']"
          >
            {{ !editGas ? $t("编辑") : $t("保存") }}
          </div>
          <div
            v-if="editGas"
            class="resets-btn"
            @click="resetGas"
            v-hasPermi="['task:alarmrules:envcancle']"
          >
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="self">
          <el-table
            ref="tableRef"
            :data="gasData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="alarmItem"
              :label="$t('告警项')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmThreshold"
              :label="$t('告警阈值')"
            >
              <template slot-scope="scope" v-if="scope.row.alarmThreshold">
                <div v-if="scope.row.isEdit">
                  <el-select
                    style="width: 120px"
                    v-model="scope.row.alarmThreshold[0]"
                    clearable
                    size="mini"
                    :placeholder="$t('请选择')"
                  >
                    <el-option
                      v-for="item in symbol"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input
                    style="width: 80px; margin: 0 8px"
                    v-model="scope.row.alarmThreshold[1]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                  &nbsp; &nbsp;<span
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    >-</span
                  >&nbsp; &nbsp;
                  <el-input
                    style="width: 80px; margin-left: 8px"
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    v-model="scope.row.alarmThreshold[2]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                </div>
                <div v-else class="txt">
                  {{ scope.row.alarmThreshold | getDetail }}
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="unit" :label="$t('单位')">
            </el-table-column>
            <el-table-column
              align="left "
              prop="alarmRules"
              :label="$t('告警规则')"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.alarmRules"></span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="left "
              prop="definedAlarmContent"
              :label="$t('自定义告警播报内容')"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.isEdit">
                  <el-input
                    style="width: 200px; margin: 0 8px"
                    v-model="scope.row.definedAlarmContent"
                    size="mini"
                  ></el-input>
                </div>
                <div v-else>{{ scope.row.definedAlarmContent }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggest"
              :label="$t('告警阈值建议')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 可吸入颗粒物浓度阈值 -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">{{ $t("可吸入颗粒物浓度阈值") }}</div>
        <div class="table_edit">
          <div @click="editPmTable()" class="edit-btn cursor-pointer">
            {{ !editPm ? $t("编辑") : $t("保存") }}
          </div>
          <div v-if="editPm" class="resets-btn" @click="resetPmTable">
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="self">
          <el-table
            ref="tableRef"
            :data="pmData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="alarmItem"
              :label="$t('告警项')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmThreshold"
              :label="$t('告警阈值')"
            >
              <template slot-scope="scope" v-if="scope.row.alarmThreshold">
                <div v-if="scope.row.isEdit">
                  <el-select
                    style="width: 120px"
                    v-model="scope.row.alarmThreshold[0]"
                    clearable
                    size="mini"
                    :placeholder="$t('请选择')"
                  >
                    <el-option
                      v-for="item in symbol"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <el-input
                    style="width: 80px; margin: 0 8px"
                    v-model="scope.row.alarmThreshold[1]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                  &nbsp; &nbsp;<span
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    >-</span
                  >&nbsp; &nbsp;
                  <el-input
                    style="width: 80px; margin-left: 8px"
                    v-if="
                      scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                      scope.row.alarmThreshold[0] == $t('超出阀值范围')
                    "
                    v-model="scope.row.alarmThreshold[2]"
                    size="mini"
                    :placeholder="$t('阀值')"
                    type="number"
                  ></el-input>
                </div>
                <div v-else class="txt">
                  {{ scope.row.alarmThreshold | getDetail }}
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="unit" :label="$t('单位')">
            </el-table-column>
            <el-table-column
              align="left "
              prop="alarmRules"
              :label="$t('告警规则')"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.alarmRules"></span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="left "
              prop="definedAlarmContent"
              :label="$t('自定义告警播报内容')"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.isEdit">
                  <el-input
                    style="width: 200px; margin: 0 8px"
                    v-model="scope.row.definedAlarmContent"
                    size="mini"
                  ></el-input>
                </div>
                <div v-else v-html="scope.row.definedAlarmContent"></div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggest"
              :label="$t('告警阈值建议')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!--其他 -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">{{ $t("其他") }}</div>
        <div class="table_edit">
          <div @click="editOtherTable" class="edit-btn cursor-pointer">
            {{ !editOther ? $t("编辑") : $t("保存") }}
          </div>
          <div v-if="editOther" class="resets-btn" @click="resetOtherTable">
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="self">
          <el-table
            ref="tableRef"
            :data="otherData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="alarmItem"
              :label="$t('告警项')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmThreshold"
              :label="$t('告警阈值')"
            >
              <template slot-scope="scope" v-if="scope.row.alarmThreshold">
                <div v-if="scope.row.isEdit">
                  <div
                    v-if="
                      scope.row.alarmThreshold[3] &&
                      scope.row.alarmThreshold[3] == 'enum'
                    "
                  >
                    <el-select
                      style="width: 120px"
                      v-model="scope.row.alarmThreshold[0]"
                      clearable
                      size="mini"
                      :placeholder="$t('请选择')"
                    >
                      <el-option
                        v-for="item in enumSymbol"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-select
                      style="width: 120px; margin-left: 8px"
                      v-model="scope.row.alarmThreshold[1]"
                      clearable
                      size="mini"
                      :placeholder="$t('请选择')"
                      v-if="scope.row.alarmItem == '烟雾'"
                    >
                      <el-option
                        v-for="item in enumValue"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-select
                      style="width: 120px; margin-left: 8px"
                      v-model="scope.row.alarmThreshold[1]"
                      clearable
                      size="mini"
                      :placeholder="$t('请选择')"
                      v-if="scope.row.alarmItem == '红外火焰'"
                    >
                      <el-option
                        v-for="item in enumValue2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                  <div v-else>
                    <el-select
                      style="width: 120px"
                      v-model="scope.row.alarmThreshold[0]"
                      clearable
                      size="mini"
                      :placeholder="$t('请选择')"
                    >
                      <el-option
                        v-for="item in symbol"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <el-input
                      style="width: 80px; margin: 0 8px"
                      v-model="scope.row.alarmThreshold[1]"
                      size="mini"
                      :placeholder="$t('阀值')"
                      type="number"
                    ></el-input>
                    &nbsp; &nbsp;<span
                      v-if="
                        scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                        scope.row.alarmThreshold[0] == $t('超出阀值范围')
                      "
                      >-</span
                    >&nbsp; &nbsp;
                    <el-input
                      style="width: 80px; margin-left: 8px"
                      v-if="
                        scope.row.alarmThreshold[0] == $t('介于阀值范围') ||
                        scope.row.alarmThreshold[0] == $t('超出阀值范围')
                      "
                      v-model="scope.row.alarmThreshold[2]"
                      size="mini"
                      :placeholder="$t('阀值')"
                      type="number"
                    ></el-input>
                  </div>
                </div>
                <div v-else class="txt">
                  {{ scope.row.alarmThreshold | getDetail }}
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" prop="unit" :label="$t('单位')">
            </el-table-column>
            <el-table-column
              align="left "
              prop="alarmRules"
              :label="$t('告警规则')"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.alarmRules"></span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="left "
              prop="definedAlarmContent"
              :label="$t('自定义告警播报内容')"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.isEdit">
                  <el-input
                    style="width: 200px; margin: 0 8px"
                    v-model="scope.row.definedAlarmContent"
                    size="mini"
                  ></el-input>
                </div>
                <div v-else v-html="scope.row.definedAlarmContent"></div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggest"
              :label="$t('告警阈值建议')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 气象站阈值 -->
    <div class="tableContent">
      <div class="table_top">
        <div class="title">{{ $t("气象站阈值") }}</div>
        <div class="table_edit">
          <div @click="editWeatherTable" class="edit-btn cursor-pointer">
            {{ !editWeather ? $t("编辑") : $t("保存") }}
          </div>
          <div v-if="editWeather" class="resets-btn" @click="resetWeatherTable">
            {{ $t("取消") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="self">
          <el-table
            ref="tableRef"
            :data="meteorologicalData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column
              align="center"
              prop="alarmItem"
              :label="$t('告警项')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="alarmThreshold"
              :label="$t('告警阈值暂不支持修改与气象站巡检联动阈值同步')"
            >
            </el-table-column>
            <el-table-column align="center" prop="unit" :abel="$t('单位')">
            </el-table-column>
            <el-table-column
              align="left "
              prop="alarmRules"
              :label="$t('告警规则')"
            >
              <template slot-scope="scope">
                <span v-html="scope.row.alarmRules"></span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="left "
              prop="definedAlarmContent"
              :label="$t('自定义告警播报内容')"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.isEdit">
                  <el-input
                    style="width: 200px; margin: 0 8px"
                    v-model="scope.row.definedAlarmContent"
                    size="mini"
                  ></el-input>
                </div>
                <div v-else v-html="scope.row.definedAlarmContent"></div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="suggest"
              :label="$t('告警阈值建议')"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { API_getenvirList, API_editRuleEnvir } from "@/api/task/alarmrules.js";
export default {
  data() {
    return {
      humitureData: [], //温湿度阈值数据
      gasData: [], //气体浓度阈值数据
      pmData: [], //可吸入颗粒物阈值数据
      otherData: [], //其他阈值数据
      meteorologicalData: [], //气象站阈值数据
      editHumiture: false, //编辑温湿度
      editGas: false, //编辑气体浓度
      editPm: false, //编辑可吸入颗粒物浓度
      editOther: false, //编辑其他
      editWeather: false, //编辑气象站
      // 范围下拉框
      symbol: [
        {
          value: ">",
          label: ">",
        },
        {
          value: "≥",
          label: "≥",
        },
        {
          value: "<",
          label: "<",
        },
        {
          value: "≤",
          label: "≤",
        },
        {
          value: this.$t("介于阀值范围"),
          label: this.$t("介于阀值范围"),
        },
        {
          value: this.$t("超出阀值范围"),
          label: this.$t("超出阀值范围"),
        },
      ],
      enumSymbol: [
        {
          value: "==",
          label: "==",
        },
        {
          value: "!=",
          label: "!=",
        },
      ],
      enumValue: [
        {
          value: this.$t("有烟雾"),
          label: this.$t("有烟雾"),
        },
        {
          value: this.$t("无烟雾"),
          label: this.$t("无烟雾"),
        },
      ],
      enumValue2: [
        {
          value: this.$t("有火焰"),
          label: this.$t("有火焰"),
        },
        {
          value: this.$t("无火焰"),
          label: this.$t("无火焰"),
        },
      ],
    };
  },
  created() {
    this.getTableList();
  },
  methods: {
    /**获取表格数据 */
    getTableList() {
      API_getenvirList().then((res) => {
        if (res.code == 200) {
          this.humitureData = [];
          this.gasData = [];
          this.pmData = [];
          this.otherData = [];
          this.meteorologicalData = [];
          let data = res.data.map((item) => {
            if (item.alarmConditions != null) {
              let alarmConditions = item.alarmConditions[0];
              let alarmKey = alarmConditions.alarmKey;
              let alarmValue = alarmConditions.alarmValue;
              let alarmValue1 = alarmConditions.alarmValue1;
              let alarmEquip = alarmConditions.alarmEquip;
              if (alarmConditions.alarmEquip == "single") {
                return {
                  alarmThreshold: [alarmKey, alarmValue],
                  alarmItem: item.alarmName,
                  alarmConditions: item.alarmConditions,
                  unit: item.unit,
                  alarmRules: item.alarmContent,
                  suggest: item.alarmAdvise,
                  dateType: item.dateType,
                  alarmConditions: item.alarmConditions,
                  isEdit: false,
                  id: item.id,
                  unit: item.unit,
                  alarmKey: item.alarmKey,
                  definedAlarmContent: item.definedAlarmContent,
                };
              } else if (
                alarmConditions.alarmEquip == "and" ||
                alarmConditions.alarmEquip == "all"
              ) {
                return {
                  alarmThreshold: [alarmKey, alarmValue, alarmValue1],
                  alarmItem: item.alarmName,
                  alarmConditions: item.alarmConditions,
                  unit: item.unit,
                  alarmRules: item.alarmContent,
                  suggest: item.alarmAdvise,
                  dateType: item.dateType,
                  alarmConditions: item.alarmConditions,
                  isEdit: false,
                  id: item.id,
                  unit: item.unit,
                  alarmKey: item.alarmKey,
                  definedAlarmContent: item.definedAlarmContent,
                };
              } else if (alarmConditions.alarmEquip == "enum") {
                return {
                  alarmThreshold: [
                    alarmKey,
                    alarmValue,
                    alarmValue1,
                    alarmEquip,
                  ],
                  alarmItem: item.alarmName,
                  alarmConditions: item.alarmConditions,
                  unit: item.unit,
                  alarmRules: item.alarmContent,
                  suggest: item.alarmAdvise,
                  dateType: item.dateType,
                  alarmConditions: item.alarmConditions,
                  isEdit: false,
                  id: item.id,
                  unit: item.unit,
                  alarmKey: item.alarmKey,
                  definedAlarmContent: item.definedAlarmContent,
                };
              } else {
                return {
                  alarmThreshold: ["", "", ""],
                  alarmItem: item.alarmName,
                  alarmConditions: item.alarmConditions,
                  unit: item.unit,
                  alarmRules: item.alarmContent,
                  suggest: item.alarmAdvise,
                  dateType: item.dateType,
                  alarmConditions: item.alarmConditions,
                  isEdit: false,
                  id: item.id,
                  unit: item.unit,
                  alarmKey: item.alarmKey,
                  definedAlarmContent: item.definedAlarmContent,
                };
              }
            } else {
              return {
                alarmThreshold: ["", "", ""],
                alarmItem: item.alarmName,
                alarmConditions: item.alarmConditions,
                unit: item.unit,
                alarmRules: item.alarmContent,
                suggest: item.alarmAdvise,
                dateType: item.dateType,
                alarmConditions: item.alarmConditions,
                isEdit: false,
                id: item.id,
                unit: item.unit,
                alarmKey: item.alarmKey,
                definedAlarmContent: item.definedAlarmContent,
              };
            }
          });
          data.forEach((item) => {
            if (item.dateType == 1) {
              this.humitureData.push(item);
            } else if (item.dateType == 2) {
              this.gasData.push(item);
            } else if (item.dateType == 3) {
              this.pmData.push(item);
            } else if (item.dateType == 4) {
              this.otherData.push(item);
            } else if (item.dateType == 5) {
              this.meteorologicalData.push(item);
            }
          });
        }
      });
    },
    // 编辑温湿度表格
    editHumitureTable() {
      this.humitureData.forEach((item) => {
        if (!this.editHumiture) {
          // 编辑
          item.isEdit = true;
        } else {
          // 保存
          item.isEdit = false;
        }
      });
      if (this.editHumiture == true) {
        this.getAlarmRules(this.humitureData, "1");
      } else {
        this.editHumiture = !this.editHumiture;
      }
    },
    editWeatherTable() {
      this.meteorologicalData.forEach((item) => {
        if (!this.editWeather) {
          // 编辑
          item.isEdit = true;
        } else {
          // 保存
          item.isEdit = false;
        }
      });
      if (this.editWeather == true) {
        this.getAlarmRules(this.meteorologicalData, "5");
      } else {
        this.editWeather = !this.editWeather;
      }
    },
    resetWeatherTable() {
      this.editWeather = false;
      this.meteorologicalData.forEach((item) => {
        item.isEdit = false;
      });
      this.getTableList();
    },
    // 取消温湿度表格
    resetEditHumiture() {
      this.editHumiture = false;
      this.humitureData.forEach((item) => {
        item.isEdit = false;
      });
      this.getTableList();
    },
    // 编辑气体浓度表格
    editTable() {
      this.gasData.forEach((item) => {
        if (!this.editGas) {
          // 编辑
          item.isEdit = true;
        } else {
          // 保存
          item.isEdit = false;
        }
      });
      if (this.editGas == true) {
        this.getAlarmRules(this.gasData, "2");
      } else {
        this.editGas = !this.editGas;
      }
    },
    // 取消气体浓度表格
    resetGas() {
      this.editGas = false;
      this.gasData.forEach((item) => {
        item.isEdit = false;
      });
      this.getTableList();
    },
    // 编辑可吸入颗粒物表格
    editPmTable() {
      this.pmData.forEach((item) => {
        if (!this.editPm) {
          // 编辑
          item.isEdit = true;
        } else {
          // 保存
          item.isEdit = false;
        }
      });
      if (this.editPm == true) {
        this.getAlarmRules(this.pmData, "3");
      } else {
        this.editPm = !this.editPm;
      }
    },
    //取消可吸入颗粒物表格
    resetPmTable() {
      this.editPm = false;
      this.pmData.forEach((item) => {
        item.isEdit = false;
      });
      this.getTableList();
    },
    // 编辑其他表格
    editOtherTable() {
      this.otherData.forEach((item) => {
        if (!this.editOther) {
          // 编辑
          item.isEdit = true;
        } else {
          // 保存
          item.isEdit = false;
        }
      });
      if (this.editOther == true) {
        this.getAlarmRules(this.otherData, "4");
      } else {
        this.editOther = !this.editOther;
      }
    },
    //取消其他表格
    resetOtherTable() {
      this.editOther = false;
      this.otherData.forEach((item) => {
        item.isEdit = false;
      });
      this.getTableList();
    },
    // 提交数据
    submitData(data) {
      // 处理告警规则
      data.forEach((item) => {
        let alarmItem = item.alarmItem || "";
        let unit = item.unit || "";
        let thresholdZero = item.alarmThreshold[0] || "";
        let thresholdOne = item.alarmThreshold[1] || "";
        let thresholdTwo = item.alarmThreshold[2] || "";
        if (
          thresholdZero == ">" ||
          thresholdZero == "≥" ||
          thresholdZero == "<" ||
          thresholdZero == "≤"
        ) {
          let abnormality =
            "【告警】" + alarmItem + thresholdZero + thresholdOne + unit;
          let normal = "";
          switch (thresholdZero) {
            case ">":
              normal =
                "【正常】" + alarmItem + "≤" + item.alarmThreshold[1] + unit;
              break;
            case "≥":
              normal =
                "【正常】" + alarmItem + "<" + item.alarmThreshold[1] + unit;
              break;
            case "<":
              normal =
                "【正常】" + alarmItem + "≥" + item.alarmThreshold[1] + unit;
              break;
            case "≤":
              normal =
                "【正常】" + alarmItem + ">" + item.alarmThreshold[1] + unit;
              break;
          }
          if (item.alarmThreshold[0] == "") {
            item.alarmRules = "";
          } else {
            item.alarmRules = normal + "<br />" + abnormality;
          }
        } else if (
          thresholdZero == "介于阀值范围" ||
          thresholdZero == "超出阀值范围"
        ) {
          let abnormality =
            "【告警】" +
            alarmItem +
            thresholdOne +
            unit +
            " - " +
            thresholdTwo +
            unit;
          let normal =
            "【正常】" +
            alarmItem +
            "<" +
            item.alarmThreshold[1] +
            unit +
            "或" +
            ">" +
            item.alarmThreshold[2] +
            unit;
          if (item.alarmThreshold[0] == "") {
            item.alarmRules = "";
          } else {
            item.alarmRules = normal + "<br />" + abnormality;
          }
        } else {
          let abnormality =
            "【告警】" + alarmItem + thresholdZero + "有" + alarmItem;
          let normal =
            "【正常】" + alarmItem + thresholdZero + "无" + alarmItem;
          if (item.alarmThreshold[0] == "") {
            item.alarmRules = "";
          } else {
            item.alarmRules = normal + "<br />" + abnormality;
          }
        }
      });
      let submit = data.map((items) => {
        if (items.alarmConditions == null) {
          items.alarmConditions = [
            {
              alarmKey: "",
              alarmValue1: "",
              alarmEquip: "",
              alarmValue: "",
            },
          ];
        }
        if (
          items.alarmThreshold[0] == ">" ||
          items.alarmThreshold[0] == "≥" ||
          items.alarmThreshold[0] == "<" ||
          items.alarmThreshold[0] == "≤"
        ) {
          items.alarmConditions[0].alarmKey = items.alarmThreshold[0];
          items.alarmConditions[0].alarmValue = items.alarmThreshold[1];
          items.alarmConditions[0].alarmValue1 = "";
          items.alarmConditions[0].alarmEquip = "single";
        } else if (items.alarmThreshold[0] == "介于阀值范围") {
          items.alarmConditions[0].alarmKey = items.alarmThreshold[0];
          items.alarmConditions[0].alarmValue = items.alarmThreshold[1];
          items.alarmConditions[0].alarmValue1 = items.alarmThreshold[2];
          items.alarmConditions[0].alarmEquip = "and";
        } else if (items.alarmThreshold[0] == "超出阀值范围") {
          items.alarmConditions[0].alarmKey = items.alarmThreshold[0];
          items.alarmConditions[0].alarmValue = items.alarmThreshold[1];
          items.alarmConditions[0].alarmValue1 = items.alarmThreshold[2];
          items.alarmConditions[0].alarmEquip = "all";
        } else if (
          items.alarmThreshold[0] == "==" ||
          items.alarmThreshold[0] == "!="
        ) {
          items.alarmConditions[0].alarmKey = items.alarmThreshold[0];
          items.alarmConditions[0].alarmValue = items.alarmThreshold[1];
          items.alarmConditions[0].alarmValue1 = items.alarmThreshold[2];
          items.alarmConditions[0].alarmEquip = "enum";
        }
        return {
          id: items.id,
          alarmContent: items.alarmRules,
          alarmConditions: items.alarmConditions,
          unit: items.unit,
          alarmKey: items.alarmKey,
          definedAlarmContent: items.definedAlarmContent,
        };
      });
      let str = JSON.stringify(submit);
      return str;
    },
    // 保存表格
    getAlarmRules(data, type) {
      let str = this.submitData(data);
      API_editRuleEnvir(str)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: this.$t("保存成功"),
              type: "success",
            });
            if (type == "1") {
              this.editHumiture = false;
              this.humitureData = [];
            } else if (type == "2") {
              this.editGas = false;
              this.gasData = [];
            } else if (type == "3") {
              this.editPm = false;
              this.pmData = [];
            } else if (type == "4") {
              this.editOther = false;
              this.otherData = [];
            } else if (type == "5") {
              this.editWeather = false;
              this.meteorologicalData = [];
            }
          } else if (res.code == 304) {
            this.isEdit(type);
            this.$message.error(res.msg);
            this.editHumiture = !this.editHumiture;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.isEdit(type);
        })
        .finally(() => {
          this.getTableList();
        });
    },
    isEdit(type) {
      if (type == "1") {
        this.humitureData.forEach((item) => {
          if (this.editHumiture) {
            // 保存
            item.isEdit = true;
          }
        });
      } else if (type == "2") {
        this.gasData.forEach((item) => {
          if (this.editGas) {
            // 保存
            item.isEdit = true;
          }
        });
      } else if (type == "3") {
        this.pmData.forEach((item) => {
          if (this.editPm) {
            // 保存
            item.isEdit = true;
          }
        });
      } else if (type == "4") {
        this.otherData.forEach((item) => {
          if (this.editOther) {
            // 保存
            item.isEdit = true;
          }
        });
      }
    },
  },
  filters: {
    // 处理表格显示
    getDetail(key) {
      if (key[0] == ">" || key[0] == "≥" || key[0] == "<" || key[0] == "≤") {
        return key.join("");
      } else if (key[0] == "介于阀值范围" || key[0] == "超出阀值范围") {
        return key[0] + key[1] + " - " + key[2];
      } else if (key[0] == "==" || key[0] == "!=") {
        return key[0] + key[1];
      } else {
        return key[0];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.envirAlarm {
  padding: 0 24px;
}
.tableContent {
  .table_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #00d1ff;
      padding: 24px 0 16px;
    }
    .table_edit {
      display: flex;
    }
  }
}
.el-table {
  padding-bottom: 0px;
}
.edit-btn {
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(0, 209, 255, 0.7);
  background-color: rgba(0, 209, 255, 0.2);
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.resets-btn {
  width: 66px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(219, 255, 251, 0.7);
  background-color: rgba(219, 255, 251, 0.2);
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  margin-left: 10px;
}
</style>
<style scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}
</style>
